<template>
    <view class="page">
        <u-navbar class="gradient-bg" title="提现" navbarType="0" fontColor="#ffffff" gradient="linear-gradient(to bottom right, #2e996f, #3f99ab)"></u-navbar>
        <view class="ithui-content">
            <view class="withdraw">
                <!-- @click="selectCard" -->
                <view class="withdraw-head box" @click="openBankCardPopup">
                    <view class="withdraw-head-to">到账银行卡</view>
                    <view class="withdraw-head-way" v-if="form&&form.bank_id">
                        <view class="withdraw-head-way-1">
                            <image class="pic" :src="form.bank.logo" mode="widthFix" />
                            <text class="way-text">{{form.bank.name}}({{filterCardNum(form.card_number)}})</text>
                        </view>
                        <view class="withdraw-head-way-2">2小时内到账</view>
                    </view>
                    <view class="withdraw-head-way" v-else>
                        <view class="withdraw-head-way-2">请选择提现银行卡</view>
                    </view>
                    <u-icon name="arrow-right" size="20"></u-icon>
                    <!-- color="#2979ff" -->
                </view>
                <view class="withdraw-body">
                    <text>提现金额</text>
                    <view class="input-money">
                        <text class="rmb">￥</text>
                        <input v-model.number="extract" maxlength="10" type="text" @focus.prevent="stopKeyborad" class="t-input" />
                    </view>
                    <view class="info-money">
                        <view v-if="is_out">
                            <text class="info-money-num" style="color: #ff1e0f;">输入金额超过可提现余额，账户余额{{ pool }}元</text>
                        </view>
                        <view v-else-if="is_lowest">
                            <text class="info-money-num" style="color: #ff1e0f;">最低{{ lowest }}元起提现，账户余额{{ pool }}元</text>
                        </view>
                        <view v-else>
                            <text class="info-money-num">当前可提现余额{{ pool }}元，</text>
                            <text class="info-money-all" @click="getAll">全部提现</text>
                        </view>
                    </view>
                    <view :class="'tx' + (is_post ? '-active' : '')"><button @click="handleShowModel">提现</button></view>
                </view>

                <view :class="['keyboard', keyboradShow ? '' : 'active', isIphoneX ? 'isIphone' : '']">
                    <block v-for="(item, index) in 9" :key="index">
                        <view class="keyboard-item" @tap="keyboradKey(index + 1)">{{ index + 1 }}</view>
                    </block>
                    <view class="keyboard-item" @tap="keyboradKey('.')"><text>.</text></view>
                    <view class="keyboard-item" @tap="keyboradKey(0)"><text>0</text></view>
                    <view class="keyboard-item delte" @tap="keyboradDel()">
                        <image class="img" :src="$imgUrl+'withdrawal/del.png'" mode="aspectFill" :lazy-load="true"></image>
                    </view>
                </view>
                <u-modal :show="showModal" title="提现确认" showCancelButton cancelText="我再想想" confirmColor="#ff1e0f" confirmText="确认提现" @confirm="getMoney"
                    @cancel="showModal = false">
                    <view class="slot-content">
                        <rich-text :nodes="content"></rich-text>
                    </view>
                </u-modal>
            </view>
        </view>
        <uni-popup ref="bankCardpopup" type="bottom">
            <view class="bankCard-view">
                <view class="bankCard-list-view">
                    <view class="list-title">
                        {{ popupTitle }}
                    </view>
                    <image class="list-close" :src="$imgUrl+'withdrawal/close_popup_icon.png'" mode="" @click.prevent.stop="closeMask"></image>
                    <scroll-view style="max-height: 50vh;background: #fff;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
                        :refresher-threshold="100" @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore">
                        <view class="bankCard-list">
                            <view class="bankCard-item" v-for="(item, index) in list" :key="index" @click="changeCheck(item)">
                                <view class="bankCard-info">
                                    <image class="bankCard-icon" :src="item.bank.logo" mode=""></image>
                                    <view class="bankCard-name">
                                        {{ item.bank.name }}({{ filterCardNum(item.card_number) }})
                                    </view>
                                </view>
                                <view class="bankCard-check">
                                    <image v-if="item.id == checkID" :src="$imgUrl+'withdrawal/choose_icon.png'" mode=""></image>
                                    <image v-else :src="$imgUrl+'withdrawal/no_choose_icon.png'" mode=""></image>
                                </view>
                            </view>
                            <view class="bankCard-addItem" @click="addItem">
                                <image class="addItem-icon" :src="$imgUrl+'withdrawal/add_card_icon.png'" mode=""></image>
                                <view class="addItem-title">
                                    添加银行卡
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { getWithList, setWith, getAccountListsAll } from "@/api/withdrawal.js"
export default {
    data() {
        return {
            pool: 0,
            extract: '',
            service_fee: 0.0,
            showModal: false,
            is_out: false,
            is_lowest: false,
            is_post: false,
            lowest: 0.01,
            fee: 0,
            money: '',
            real_money: '',
            keyboradShow: false,
            isIphoneX: false,
            isRefuse: false,
            content: "",
            $imgUrl: this.$imgUrl,
            data: {},
            form: {},
            title: 'qilin-bankCardList',
            list: [],
            triggered: false,
            popupTitle: '请选择收款银行卡',
            checkID: '', // 选中银行卡ID
        };
    },
    watch: {
        extract(val) {
            console.log(val, '789')
            if (val > this.data.least_money && val < this.data.remain_amount) {
                this.isRefuse = false
            }
        }
    },
    onLoad(query) {

    },
    onShow() {
        let fun = [
            getWithList()
        ]
        Promise.all(fun).then(res => {
            uni.showLoading({
                title: '加载中'
            });
            let data = res[0].data
            this.data = {
                card_handling: data.data.card_handling,
                least_money: data.data.least_money,
                remain_amount: data.user.remain_amount
            }
            if (this.data) {
                this.initData();
            }
            setTimeout(() => {
                uni.hideLoading();
            }, 500);
        })
        this.getList()
    },
    methods: {
        getList() {
            getAccountListsAll({ is_show_hide: 0 }).then(res => {
                this.list = res.data
                this.form = this.list[0]
                if (this.list && this.list.length > 0 && !this.checkID) {
                    this.checkID = this.list[0].id
                    this.changeCheck(this.list[0])
                }
            })
        },
        async initData() {
            const res = {
                pool: this.data.remain_amount,
                least_money: this.data.least_money,
                fee: this.data.card_handling,
            };
            this.lowest = res.least_money;
            this.fee = res.fee;
            this.pool = res.pool;
            this.$nextTick(() => {
                this.keyboradShow = true;
            });
        },
        selectCard() {
            uni.navigateTo({
                url: "/pagesB/withdrawal/bankCard?type=1"
            })
        },
        stopKeyborad() {
            uni.hideKeyboard();
        },
        keyboradKey(key) {
            if (key === '.') {
                if (this.extract.indexOf('.') === -1) {
                    this.extract = this.extract ? this.extract.toString() + '.' : '0.';
                }
            } else {
                if (this.extract === '0') {
                    this.extract = key.toString();
                } else {
                    const decimalIndex = this.extract.indexOf('.');
                    if (decimalIndex !== -1 && this.extract.slice(decimalIndex + 1).length >= 2) {
                        return;
                    }
                    this.extract = this.extract.toString() + key;
                }
            }
            this.checkMoney();
        },
        keyboradDel() {
            if (this.extract && this.extract.length > 0) {
                let val = this.extract.slice(0, -1);
                if (val === '') {
                    val = '';
                }
                this.extract = val;
                this.checkMoney();
            }
        },
        getAll() {
            this.extract = this.pool.toString();
            this.checkMoney();
        },
        checkMoney() {
            const amount = parseFloat(this.extract);
            if (!this.extract) {
                uni.showToast({
                    title: '请输入金额~',
                    icon: 'none'
                });
                return;
            }
            if (isNaN(amount)) {
                this.is_post = false;
                // this.$api.msg('输入金额不合法');
                uni.showToast({
                    title: '输入金额不合法~',
                    icon: 'none'
                });
                return;
            }
            if (amount > this.pool) {
                this.is_out = true;
                this.is_lowest = false;
                this.is_post = false;
            } else if (amount < this.lowest && amount !== 0) {
                this.is_lowest = true;
                this.is_out = false;
                this.is_post = false;
            } else {
                this.is_out = false;
                this.is_lowest = false;
                this.is_post = true;
            }
            if (amount < this.lowest) {
                this.is_lowest = true;
                this.is_out = false;
                this.is_post = false;
            }
        },
        handleShowModel() {
            if (!this.form.bank_id) {
                uni.showToast({
                    title: '请选择银行卡~',
                    icon: 'none'
                });
                return
            }
            if (this.isRefuse) return;
            this.checkMoney();
            if (!this.is_post) return;
            this.money = this.extract;
            this.service_fee = Number((this.extract * (this.fee / 100)).toString().match(/^\d+(?:\.\d{0,2})?/));
            this.real_money = Number((this.extract - this.service_fee).toString().match(/^\d+(?:\.\d{0,2})?/));
            this.content = `<p>提现金额：<em style="font-style:normal;color:#ff1e0f">${this.money} 元</p>
				          <p>实际到账：<em style="font-style:normal;color:#ff1e0f">${this.real_money} 元</em></p>
				          <p>服务费用：<em style="font-style:normal;color:#ff1e0f">${this.service_fee} 元</em></p>
				          <p>服务费率：<em style="font-style:normal;color:#ff1e0f">${this.fee}%</em></p>
				         `
            this.showModal = true;
        },
        getMoney() {
            this.showModal = false;
            if (this.isRefuse) return;
            this.isRefuse = true;

            console.log(this.form, "678")
            let json = {
                with_amount: this.money,
                account_id: this.form.id
            }
            setWith(json).then(res => {
                if (res.code == 1) {
                    this.$toPage('/pagesB/withdrawal/result')
                }
            })
        },

        onPullDownRefresh() {
            this.extract = '';
            this.initData();
            this.is_out = false;
            this.is_lowest = false;
            this.is_post = false;
            setTimeout(function () {
                uni.stopPullDownRefresh();
            }, 500);
        },
        //关闭地址选择规则弹窗
        closeBankCardPopup() {
            this.$refs.bankCardpopup.close();
        },
        //打开银行列表弹窗
        openBankCardPopup() {
            this.$refs.bankCardpopup.open();
        },
        // 格式化银行卡信息
        filterCardNum(val) {
            let numStr = val.toString()
            let numStrLength = numStr.length
            let cardNum = ''
            if (numStrLength >= 4) {
                cardNum = numStr.substring(numStrLength - 4, numStrLength)
            } else {
                cardNum = numStr
            }
            return cardNum
        },
        // 选择银行卡
        changeCheck(item) {
            if (this.checkID != item.id) {
                this.checkID = item.id
                this.form = item
                this.closeBankCardPopup()
            }
        },
        // 关闭银行卡列表弹窗
        closeMask() {
            this.closeBankCardPopup()
        },
        // 添加银行卡
        addItem() {
            this.closeBankCardPopup()
            uni.navigateTo({
                url: "/pagesB/withdrawal/bankCard?type=1"
            })
        },
    },

};
</script>
<style lang="scss" scoped>
.page {
  .cell {
    background-color: #ffffff;
    margin: 20rpx 0 0;
    .u-slot-title {
      @include flex;
      flex-direction: row;
      align-items: center;
      .pic {
        width: 72rpx;
      }
      .txt {
        padding-left: 16rpx;
        text {
          display: block;
        }
        .p {
          font-size: 28rpx;
          color: #525252;
        }
        .p1 {
          font-size: 24rpx;
          color: #525252;
          opacity: 0.63;
        }
      }
    }
    .u-slot-value {
      font-size: 24rpx;
      color: #309978;
    }
    /deep/.u-form-item__body {
      width: 600rpx;
    }
  }
  .ithui {
    &-content {
      .withdraw {
        padding: 40rpx 0;
        &-head {
          background-color: #f7f7f7;
          display: flex;
          //   align-content: center;
          justify-content: space-between;
          padding: 40rpx 0;
          font-size: 28rpx;

          &-to {
          }

          &-way {
            display: flex;
            flex-direction: column;
            align-content: center;
            width: 60%;

            &-1 {
              color: #576b95;
              margin-bottom: 20rpx;
              display: flex;
              align-items: center;
              image {
                width: 36rpx;
                margin-right: 10rpx;
              }
              .way-text {
              }
            }

            &-2 {
              color: #acacac;
              font-size: 26rpx;
            }
          }
        }
        &-body {
          background-color: #fff;
          padding: 40rpx 60rpx;
          font-size: 28rpx;
          border-radius: 40rpx 40rpx 0 0;
          .input-money {
            display: flex;
            align-content: center;
            font-weight: 600;
            border-bottom: 1rpx solid #eaeef1;

            .rmb {
              font-size: 2em;
              top: 20rpx;
              position: relative;
            }

            .t-input {
              height: 1.9em;
              font-size: 2.5em;
              border: none;
              position: relative;
              left: 3.5%;
              outline: none;
            }
          }

          .info-money {
            margin-top: 20rpx;
            font-size: 24rpx;
            margin-bottom: 40rpx;

            &-num {
              color: #b2b2b2;
            }

            &-all {
              color: #576b95;
            }
          }

          .tx {
            button {
              color: #b2b2b2;
            }
          }

          .tx-active {
            button {
              color: #fff;
              background: #07c160;
            }
          }
        }

        .keyboard {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          background: #ebebeb;
          display: flex;
          justify-content: center;
          z-index: 2;
          flex-wrap: wrap;
          transition: all 0.2s ease-in 0.2s;
        }

        .active {
          bottom: -400rpx;
        }

        .keyboard-item {
          box-sizing: border-box;
          width: 250rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background: #fff;
          font-size: 40rpx;
          color: #333;
          height: 99rpx;
          border: 1rpx solid #ebebeb;
          border-top: none;
          border-left: none;
        }

        .hide {
          opacity: 0;
        }

        .delte {
          background: none;
          box-shadow: none;
        }

        .delte image {
          width: 60rpx;
          height: 60rpx;
        }

        .isIphone {
          padding-bottom: 68rpx !important;
        }

        .fee {
          em {
            font-size: 0.5rem;
            font-style: normal;
          }
        }
      }
    }
  }
}
::v-deep .u-modal__content {
  justify-content: flex-start;
}

::-webkit-scrollbar {
  display: none;
}
.bankCard-view {
  width: 100vw;
  //   position: relative;
  position: fixed;
  bottom: 0;
  left: 0;
  .bankCard-list-view {
    width: 100vw;
    padding-top: 28rpx;
    padding-bottom: 48rpx;
    border-radius: 31rpx 31rpx 0rpx 0rpx;
    background: #fff;
    .list-title {
      width: 100vw;
      height: 42rpx;
      line-height: 42rpx;
      font-size: 31rpx;
      font-weight: bold;
      text-align: center;
      padding: 18rpx 0;
    }
    .list-close {
      width: 77rpx;
      height: 77rpx;
      position: absolute;
      top: 8rpx;
      right: 8rpx;
    }
    .bankCard-list {
      margin: 0 38rpx;
      .bankCard-item {
        display: flex;
        height: 121rpx;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e4e5e6;
        .bankCard-info {
          display: flex;
          align-items: center;
          .bankCard-icon {
            width: 46rpx;
            height: 46rpx;
            margin-right: 15rpx;
          }
          .bankCard-name {
            font-size: 31rpx;
            color: #242526;
          }
        }
        .bankCard-check {
          width: 121rpx;
          height: 121rpx;
          display: flex;
          align-items: center;
          image {
            width: 36rpx;
            height: 36rpx;
            margin-left: auto;
          }
        }
      }
      .bankCard-addItem {
        display: flex;
        height: 100rpx;
        align-items: center;
        .addItem-icon {
          width: 42rpx;
          height: 42rpx;
          margin-right: 17rpx;
        }
        .addItem-title {
          font-size: 31rpx;
          line-height: 42rpx;
          color: #242526;
        }
      }
    }
  }
}
</style>
